<template>
	<div class="ta-fab"
		:style="[{bottom:_bottom,left:_left,top:_top,right:_right,backgroundColor:background?background:'transparent'}]">
		<img :width="_width" :height="_width" :src="_src" alt=""
			style="display: block; border-radius: 50%;box-shadow: 0 0.3125rem 0.4375rem rgba(0,0,0,.1);">
		<div @click="handleDelete" class="_fd-drag-danger _fd-drag-btn"
			style="position: absolute;right:-22px; top:0px;">
			<i class="fc-icon icon-delete"></i>
		</div>
	</div>
</template>
<script>
	import {
		defineComponent
	} from 'vue';
	export default defineComponent({
		name: 'TaFab',
		data() {
			return {

			};
		},
		props: {
			src: String,
			background: {
				type: String,
				default: ''
			},
			top: {
				type: String,
				default: 'auto'
			},
			left: {
				type: String,
				default: 'auto'
			},
			bottom: {
				type: String,
				default: '0rpx'
			},
			right: {
				type: String,
				default: '0rpx'
			},
			width: {
				type: String,
				default: '120rpx'
			}
		},
		methods: {
			handleDelete() {
				this.$parent.$emit('delete')
			}
		},
		computed: {
			_src() {
				if (this.src) {
					return `${this.src}?x-oss-process=image/resize,w_375`;
				} else {
					return 'http://dingyue.ws.126.net/2024/0417/40ea1626j00sc31tt00akd200n400n4g005j005j.jpg?x-oss-process=image/resize,w_375';
				}
			},
			_width() {
				var width = this.width.replace('r', '').replace('px', '').replace('auto', '');
				if (width) {
					return `${width}px`;
				} else {
					return '58px';
				}
			},
			_bottom() {
				var bottom = this.bottom.replace('r', '').replace('px', '').replace('auto', '');
				if (bottom) {
					bottom = bottom - 667 + 20 + 3;
					return `${bottom}px`;
				} else {
					if (this._top == "auto") {
						bottom = -667 + 20 + 3;
						return `${bottom}px`;
					} else {
						return "auto"
					}
				}
			},
			_top() {
				var top = this.top.replace('r', '').replace('px', '').replace('auto', '');
				if (top) {
					return `${top}px`;
				} else {
					return 'auto';
				}
			},
			_left() {
				var left = this.left.replace('r', '').replace('px', '').replace('auto', '');
				if (left) {
					left = left - 375 + 20 + 3;
					return `${left}px`;
				} else {
					if (this._right == "auto") {
						left = -375 + 20 + 3;
						return `${left}px`;
					} else {
						return "auto"
					}
				}
			},
			_right() {
				var right = this.right.replace('r', '').replace('px', '').replace('auto', '');
				if (right) {
					return `${right}px`;
				} else {
					return 'auto';
				}
			}
		}
	});
</script>
<style scoped>
	.ta-fab {

		position: absolute;
		right: 3px;
		background-color: transparent;
		/*bottom: calc(-667px + 20px + 10px);*/
	}
</style>
